import React,{useState} from 'react'
import { Layout, Menu, Dropdown, Avatar } from 'antd'
import { UserOutlined } from '@ant-design/icons';
import {withRouter} from 'react-router-dom'
import {
  MenuUnfoldOutlined,
  MenuFoldOutlined
} from '@ant-design/icons';
import { TabWwitch } from '../../redux/actions/tabswitch'
import {connect} from 'react-redux'
const { Header } = Layout;
function TopHeader(props) {
  const [collapsed, setCollapsed] = useState(false)

  // 切换开关
  const changeCollapsed = () => {
    props.TabWwitch()
  }
  const {role:{roleName},username} = JSON.parse(localStorage.getItem('token'))
  const menu = (
   <Menu>
      <Menu.Item key={0}>
        {roleName}
      </Menu.Item>
      <Menu.Item key={1} danger onClick={() => {
        localStorage.removeItem('token')
        props.history.replace('/login')
      }}>
        退出登录
      </Menu.Item>
    </Menu>
  );
  return (
    <Header className="site-layout-background" style={{ padding: '0 16px' }}>
      {
        props.isCollapsed ? <MenuUnfoldOutlined onClick={changeCollapsed}/>:<MenuFoldOutlined onClick={changeCollapsed}/>
      }
      <div style={{float:"right"}}>
        <span>欢迎<b style={{color:'#1890ff'}}>{username}</b>回来</span>
        <Dropdown overlay={menu} trigger={['click']}>
          <Avatar size="large" icon={<UserOutlined />} />
        </Dropdown>
      </div>
    </Header>
  )
}
// 映射出去
 const mapStateToProps = ({collApsedReducer:{isCollapsed}}) => {
  return {
    isCollapsed
  }
}
export default connect(mapStateToProps,{TabWwitch})(withRouter(TopHeader))